<!DOCTYPE html>
<html>
<head th:include="vue-element :: header"></head>
<style>
    [v-cloak] {
        display: none;
    }

    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        colorName: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
<body>
<div id="vm" v-cloak>
    <el-container>
        <el-main>
            <div style="display: flex;flex-direction:row;justify-content:space-between;align-items:center;"
                 class="box-header">
                <h3>{{yearMonth1}}&nbsp;&nbsp;日活统计</h3>
                <el-date-picker
                        @change="renderChart1"
                        v-model="yearMonth1"
                        type="month"
                        size="small"
                        placeholder="选择月"
                        :picker-options="pickerOptions"
                        format="yyyy 年 MM 月"
                        value-format="yyyy-MM">
                </el-date-picker>
            </div>
            <ve-line
                    class="box-content"
                    :data="chartData1"
                    :settings="chartSettings1"
                    :toolbox="toolbox"
                    :data-empty="dataEmpty1">
            </ve-line>
        </el-main>
    </el-container>
</div>
<div th:include="vue-element :: footer"></div>
<script src="//cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<script th:inline="javascript">
        // 订单日统计
        const vm = new Vue({
            el: "#vm",
            data: {
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                yearMonth1: '',
                date: '',
                chartData1: null,
                toolbox: {
                    feature: {
                        magicType: {type: ['line', 'bar']},
                        saveAsImage: {}
                    }
                },
                chartSettings1: {
                    metrics: ['count'],
                    labelMap: {
                        count: '日活'
                    }
                },
            },
            computed: {
                dataEmpty1() {
                    return this.chartData1 && this.chartData1.rows && this.chartData1.rows.length > 0 ? false : true;
                }
            },
            created() {
                this.yearMonth1 = moment().format('YYYY-MM');
                this.renderChart1(this.yearMonth1);
            },
            mounted() {
                // 订单月统计饼图
                this.myChart = echarts.init(document.getElementById("container"));
                this.myChart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        right: 'right',
                        data: []
                    },
                    series: [
                        {
                            name: '订单月统计',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
                window.addEventListener("resize", this.myChart.resize);
                this.date = moment().format('YYYY-MM');
                this.load(this.date);
            },
            methods: {
                renderChart1(val) {
                    let that = this;
                    // axios请求数据
                    axios.get("/app/apicall/dayStatistic", {
                        params: {
                            month: val
                        }
                    }).then(function (resp) {
                        const data = resp.data;
                        that.chartData1 = data;
                        console.log(data);
                    }).catch(function (error) {
                        console.log(error);
                    });
                }
            }
        });
</script>
</body>
</html>